<template>
	<view>

		<!-- 提示登录 -->
		<view class="login-notic" v-if="!hasLogin && showTips">
			<text class="title">为方便您购买，请提前登录</text>
			<navigator class="btn-login" url="/pages/user/login/index">立即登录</navigator>
			<i class="icon i-close" @click="showTips = false;"></i>
		</view>

		<view class="goods-wrapper">
			<view class="wrap">

				<!-- 轮播图 -->
				<view class="banner-wrap">
					<swiper class="banner-swiper" :current="bannerIndex" :autoplay="autoplay" circular @change="e => bannerIndex = e.detail.current">
						<swiper-item class="swiper-item" v-for="(item, index) in banners" :key="index">
							<image class="cover" :src="item" mode="aspectFill" @click="previewPicture(item)"></image>
						</swiper-item>
					</swiper>
					<!-- 左右切换箭头 -->
					<view class="btn btn-left" @click="switchBanner(false)">
						<i class="icon i-left"></i>
					</view>
					<view class="btn btn-right" @click="switchBanner(true)">
						<i class="icon i-right"></i>
					</view>
					<!-- 底部索引条 -->
					<view class="index-bar">
						<block v-for="(item, index) in banners.length" :key="index">
							<text :class="['item', {'active': index == bannerIndex}]" @click="bannerIndex = index;"></text>
						</block>
					</view>
				</view>

				<!-- 商品详情 -->
				<view class="goods-main">
					<view class="goods-name">{{goods.name}}</view>
					<view class="goods-desc">{{goods.desc}}</view>
					<view class="goods-price">{{currentPrice}}元</view>
					<view class="sku-list">
						<view class="version-wrap">
							<view class="title">选择版本</view>
							<view class="items">
								<block v-for="(item, index) in goods.skus" :key="index">
									<view :class="['item', {'active': index == skuIndex}]" @click="switchVersion(index)">
										<text class="name elip">{{item.name}}</text>
										<text class="price">{{item.price}}元</text>
									</view>
								</block>
							</view>
						</view>
						<view class="color-wrap">
							<view class="title">选择颜色</view>
							<view class="items">
								<block v-for="(item, index) in goods.skus[skuIndex].colors" :key="index">
									<view :class="['item', {'active': index == colorIndex}]" @click="switchColor(index)">
										<image class="thumb" :src="item.pictures[0]" mode="aspectFill"></image>
										<text class="name">{{item.name}}</text>
									</view>
								</block>
							</view>
						</view>
					</view>
					<view class="current-goods">
						<view class="goods-info">
							<view class="name">{{currentName}}</view>
							<view class="price">{{goods.skus[skuIndex].price}}元</view>
						</view>
						<view class="subtotal">总计：{{goods.skus[skuIndex].price}}元</view>
					</view>
					<button :class="['btn-primary', {'disabled': sellOut}]" @click="putCart">
						{{sellOut ? '该商品已售罄' : '加入购物车'}}
					</button>
				</view>

			</view>
		</view>

		<!-- 价格说明 -->
		<view class="price-desc">
			<view class="wrap">
				<view class="title">价格说明</view>
				<image class="image" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a482afa34053b1b32ece1023475af7fb.jpeg" mode="aspectFill"></image>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import goods from '@/common/config/goods/sku.config.js';

	export default {
		props: {
			goodsId: Number
		},
		data() {
			return {
				goods,
				skuIndex: 0,
				colorIndex: 0,
				bannerIndex: 0,
				autoplay: true,
				showTips: true
			}
		},
		computed: {
			...mapState(['hasLogin']),
			banners() {
				return this.goods.skus[this.skuIndex].colors[this.colorIndex].pictures;
			},
			currentPrice() {
				return this.goods.skus[this.skuIndex].price;
			},
			currentName() {
				return this.goods.name + ' ' + this.goods.skus[this.skuIndex].name + ' ' + this.goods.skus[this.skuIndex].colors[
					this.colorIndex].name;
			},
			sellOut() {
				return this.goods.skus[this.skuIndex].colors[this.colorIndex].sellOut;
			}
		},
		methods: {
			previewPicture(url) {
				uni.previewImage({
					urls: [url]
				});
			},
			switchBanner(toNext) {
				this.autoplay = false;

				if (toNext) {
					if (this.bannerIndex < this.banners.length - 1) {
						this.bannerIndex++;
					} else {
						this.bannerIndex = 0;
					}
				} else {
					if (this.bannerIndex == 0) {
						this.bannerIndex = this.banners.length - 1;
					} else {
						this.bannerIndex--;
					}
				}

				setTimeout(() => {
					this.autoplay = true;
				}, 2000);
			},
			switchVersion(index) {
				this.bannerIndex = 0;
				this.colorIndex = 0;
				this.skuIndex = index;
			},
			switchColor(index) {
				this.bannerIndex = 0;
				this.colorIndex = index;
			},
			putCart() {
				if (!this.sellOut) {
					uni.showLoading({
						title: '处理中...',
						mask: true
					});

					const goods = {
						id: this.goods.id,
						name: this.currentName,
						thumbUrl: this.banners[0],
						price: this.currentPrice,
						maxCount: 5,
						commentCount: 90901.8
					};

					setTimeout(() => {
						this.$store.dispatch('putGoods', goods).then(() => {
							uni.navigateTo({
								url: `/pages/cart/add-success?goodsName=${goods.name}`
							});
						}).catch(() => {
							this.$alert('商品加入购物车数量超过限购数', {
								showCancel: false
							});
						}).finally(() => {
							uni.hideLoading();
						});
					}, 1000);
				}
			}
		}
	}
</script>

<style lang="scss">
	.login-notic {
		background-color: $bg-color-grey;
		width: 100%;
		height: 48px;
		line-height: 48px;
		@extend %flex-align-center;
		justify-content: center;
		font-size: 14px;

		.title {
			color: #333;
		}

		.btn-login {
			color: #ff6700;
			margin-left: 25px;
			cursor: pointer;
		}

		.icon {
			color: #b5b5b5;
			font-size: 12px;
			font-weight: bold;
			margin-left: 10px;
			cursor: pointer;
		}
	}

	.goods-wrapper {
		background-color: $bg-color;

		.wrap {
			width: 1226px;
			margin: 0 auto;
			display: flex;
			padding-top: 32px;

			.banner-wrap {
				width: 560px;
				height: 560px;
				position: relative;
				margin-right: 58px;

				.banner-swiper,
				.cover {
					width: 560px;
					height: 560px;
				}

				.btn {
					position: absolute;
					top: 50%;
					width: 41px;
					height: 69px;
					transform: translateY(-50%);
					cursor: pointer;
					border-radius: 2px;
					@extend %flex-align-center;
					justify-content: center;

					&:hover {
						background-color: rgba(0, 0, 0, .6);
					}

					.icon {
						font-size: 30px;
						color: $border-color;
					}

					&.btn-left {
						left: 0;
					}

					&.btn-right {
						right: 0;
					}
				}

				.index-bar {
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					text-align: center;
					padding-bottom: 0;

					.item {
						display: inline-block;
						width: 50px;
						height: 2.5px;
						margin-right: 10px;
						background-color: #ccc;
						cursor: pointer;

						&:hover,
						&.active {
							background-color: #a3a3a3;
						}
					}
				}
			}

			.goods-main {

				.goods-name {
					font-size: 24px;
					font-weight: normal;
					color: #212121;
					line-height: 1;
				}

				.goods-desc {
					font-size: 14px;
					color: #b0b0b0;
					padding-top: 8px;
				}

				.goods-price {
					font-size: 18px;
					line-height: 1;
					color: $color-primary;
					border-bottom: 1px solid #e0e0e0;
					padding: 20px 0;
				}

				.sku-list {
					margin-top: 40px;

					.version-wrap,
					.color-wrap {
						margin-bottom: 30px;

						.title {
							line-height: 1;
							font-size: 18px;
						}

						.items {
							display: flex;
							flex-wrap: wrap;
							width: 612px;
							overflow-x: hidden;

							.item {
								height: 42px;
								width: 298px;
								line-height: 42px;
								margin-top: 15px;
								margin-right: 6px;
								cursor: pointer;
								font-size: 16px;
								transition: all .2s ease;
								@extend %flex-align-center;
								justify-content: center;
								border: 1px solid $border-color;

								&.active {
									border-color: $color-primary;

									.name {
										color: $color-primary;
									}

									.price {
										color: #757575;
									}
								}

								.name {
									display: inline-block;
									max-width: 170px;
									color: $text-color;
								}

								.thumb {
									width: 16px;
									height: 16px;
									margin-right: 10px;
								}

								.price {
									color: #b0b0b0;
									margin-left: 20px;
								}
							}
						}
					}
				}

				.current-goods {
					background: #f9f9fa;
					padding: 30px;
					margin-bottom: 30px;

					.goods-info {
						@extend %flex-align-center;
						justify-content: space-between;
						line-height: 30px;
						color: #616161;
						font-size: 14px;
					}

					.subtotal {
						color: $color-primary;
						font-size: 24px;
						padding-top: 20px;
						line-height: 30px;
					}
				}

				.btn-primary {
					width: 298px;
					height: 52px;
					line-height: 52px;
					font-size: 16px;
					color: #FFFFFF;
					background-color: $color-primary;
					text-align: center;
					margin-left: 0;

					&:hover {
						opacity: .8;
					}

					&.disabled {
						cursor: not-allowed;
						background-color: $bg-color-gray;
					}
				}
			}
		}
	}

	.price-desc {
		margin-top: 50px;
		background-color: $bg-color-grey;

		.wrap {
			width: 1226px;
			margin: 0 auto;
			padding-bottom: 50px;

			.title {
				font-size: 22px;
				font-weight: normal;
				padding: 1em 0;
			}

			.image {
				width: 100%;
				height: 189px;
			}
		}
	}
</style>
